<template>
	<div class="three-goodsitem-wrap">
		<div class="horizon-goodsitem-container">
			<div class="img-wrap" v-for="(goodsItem, index) in goods" :key="index"  @click="openPage(goodsItem, configData)" :style="getStyleWidth(goodsItem)">
				<img :src="goodsItem.image" style="height: 100%;width: auto;">
				<video-cover-start :goods-item="goodsItem" @click="openPage(goodsItem, configData)"></video-cover-start>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'VertOneGoodsitem',
		props: {
			configData: {
				type: Object,
				default() {
					return {
						height: 1080,
						backgroundImage: "",
						goods: []
					}
				}
			}
		},
		data(){
			return {
				height: this.configData.height,
				ratio: window.screen.availHeight/this.configData.height,
				backgroundImage:  this.configData.backgroundImage,
				goods: this.configData.goods,
			}
		},
		methods: {
			getStyleWidth(goodsItem) {
				return {
					height: Math.round(goodsItem.height*this.ratio)+'px'
				}
			}
		}
	}
</script>
